<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- 
          vue2和vue3在v-if和v-for使用时的区别
          v-if和v-for写在同一个标签中，才会有优先级问题
          vue2中 v-for的优先级要高于v-if
          vue3中 v-if的优先级要高于v-for
          如下的写法在vue2中可以完美执行，但在vue3中会报警告，条件判断不生效

          template 它是vue内置一个标签，它只占位不生成html标签
            + vue2中template如果配合v-for，它是不会直接在template标签上写key属性
            + vue3中template是可以直接写key属性

          建议：尽量不要把v-if和v-for写在同一个标签上，容易混淆
         -->
        <!-- <li v-for="item in arr" v-if="item!=2">{{item}}</li> -->
        <template v-for="item in arr" :key="item">
          <li v-if="item!=2">{{item}}</li>
        </template>
      </ul>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            arr: [1, 2, 3]
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
